<!doctype html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="../js/jquery-3.6.1.min.js"></script>
  <title></title>
  <script>
    var setting = {}
    var url = window.location.search;
    if (url.indexOf("?") !== -1) {
      var str = url.substring(1);
      $.ajax({
        type: 'GET',
        url: '/qrdata',
        data: { id: str.substring(str.indexOf('id=') + 3, str.length) },
        async: false,
        dataType: 'json',
        success: function (data) {
          setting = data.data
        }
      })
    }

    // document.title = _setting.Name;
    if (navigator.userAgent.match(/Alipay/i)) {
      window.location.href = setting.alipay;
    }

  </script>
  <style>
    body,
    html {
      height: 100%;
      margin: 0;
      font-size: 16px;
      font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif
    }

    .code-item {
      width: 100%
    }

    .ui-flex-pack-center {
      -webkit-box-pack: center
    }

    .ui-flex-ver {
      -webkit-box-orient: vertical
    }

    .ui-flex-align-center {
      -webkit-box-align: center
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      margin: 0
    }

    .ui-panel {
      display: -webkit-box;
      width: 100%;
      -webkit-box-sizing: border-box
    }

    h1 {
      font-size: 25px
    }

    #ui-head {
      background-color: #fff;
      padding: 10px 0
    }

    h2 {
      font-size: 16px;
      font-weight: 400
    }

    .ui-tips {
      background-color: #fff;
      color: #46a638;
      font-size: 20px;
      text-align: center;
      padding: 5px 0;
      margin: 25px auto;
      width: 240px;
      border-radius: 20px
    }

    .ui-qrcode {
      background-color: #fff;
      border-radius: 15px;
      width: 230px;
      height: 230px;
      margin: 0 auto;
      text-align: center
    }

    .ui-qrcode img {
      width: 80%;
      height: 80%;
      margin-top: 10%;
    }

    .ui-PayLine {
      border-bottom: 3px dotted #fff;
      margin: 0 auto;
      width: 210px;
      height: 25px
    }

    #ui-setps {
      color: #fff;
      text-align: center;
      font-size: 14px
    }

    #ui-setps i {
      font-size: 30px
    }

    #ui-setps>div {
      padding: 15px 10px 0 10px
    }

    .ui-circle {
      background-color: #fff;
      border-radius: 50%;
      color: #46a638;
      text-align: center;
      font-size: 11px;
      width: 16px;
      height: 16px;
      line-height: 16px;
      margin: 0 auto 10px;
    }


    .ui-box {
      -webkit-box-flex: 1
    }

    .ui-step {
      padding-top: 8px;
      font-weight: bold;
    }

    #color {
      background-color: royalblue;
    }

    @font-face {
      font-family: iconfont;
      src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAkgAAsAAAAADTwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8d0oxY21hcAAAAYAAAACaAAACGDficlNnbHlmAAACHAAABKsAAAX48ttoaWhlYWQAAAbIAAAALwAAADYSd6GwaGhlYQAABvgAAAAcAAAAJAfeA4tobXR4AAAHFAAAAA8AAAAoKAAAAGxvY2EAAAckAAAAFgAAABYHWgZabWF4cAAABzwAAAAdAAAAIAErAJNuYW1lAAAHXAAAAUUAAAJtPlT+fXBvc3QAAAikAAAAeQAAAKf9MwgNeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMb6wY27438AQw9zI0AAUZgTJAQDiBwwleJzlkrERwjAMRZ+dYBOOguMYIwOkyigpU1CmZg4q5lMyQrogWTSQEZDv+awvy/ZJBg5ApbRKDeFFwOypaih6xanoNXf1r1xUiRIlSyeDjDLN69JvG0jYaz8WNP/2NaDR845Est4Q9D1Jt6Vd5v/ZucyPj9dYfZ2yjo71TrKjVUQ6B4sPDhYfHeuxTI71d14d+wdL75De/mExtgAAeJxNVGtoFFcUvufeeeyu2c1udh55x93pzk2asDE7s7uazKSJaB+WJAYKaRWhsSo0VItQapNiiaBCa/1TKIKmFAK2pP6qpUgtJoIPJD8aaH+IKTaF2loLrST0hxT3bs9sjGSZPffc75zznblnzrmEElK+yq6yfrKBJAiBGKjNYPZCMQtJ4EUToDxbkuXS7FxJkkovisvzfR+BzPqk0twaLm6IuRvbECX4C/im2D22j2wi25HP5lnkNJtBR+YscGTOmUYv4raVVhFTNDSaRq6IlkLezQQYD96hqxeeg0LRLhQVdqOpGGtLsWhHVro9PX1bQrl7WLO1aPLAO3t3jZzM2Hbm5Miu6xVVXGjb9S7bNuUec9PTA9yM69VKkbYN9SVYY1vC/WDbKgHK1kiU84i7Lrai7n11X+a1s/Lxl7Wxvi3n3NoqKbe7s4kQhmeblAg7hrUyyTOEyDbhBVI0iKkQtq5yTOWKZXM1qJ9JyaJYkmVILS5CSpbF0uLlR7L86HJFPghTNVQVhnPuUUi6k+u9MIpdXPNDWZoOUwkUmHKOguYGtYZAsDL9k8QJCYOS5mC7hVwLQCFnaOxB6aaxxRQ/GB3dRpmqRnc7fat0U9fBQVUvU0Vv7w44yn+xa8wgYSTkKuB5uEJg/OdRmHCh9qq5IH6F+m+GxaFTcGF284fidyJhzHl2hu0lNjlITpCTGIkfM7squKLms5BW1AS3Y9QEw6yUhSOYNBQ1bXeC3Qv4lgmUhpno0jUjV/ChKx90gGHq6wEnABws7Hogk7eDPkJaTTXMAhJzLL5mmKxI6/VIR3OjEe5oqdWga9CFzU0DuWgL0FA4PfrKlQMKdIG6Y2bHaPrfatbIY8ehNmNATIuBkWQZtqpQTgEgqkfBTNIMK92qAjro9QxSqaFGpWNDO8foxiZYiTWm8QGI7OGOw8XU5nq2acAqk5DS1ALS1ycucVf8c/hTlkqvJDINVcdhoaaurkYsypFYLCK/l6zFHBs/X929XVNH400fr25ex01046nh+hbMSQd74tW0prZhaIxi7mefr1+bs6AXJ0mGFJ92Yi4odgxw5iyFqNiXiLkcy22Yho5fNd35tEOaQVNBoeSOWFIUSN0Z+qQ/zKq0cPeJF66Jx9iv0rXrIMkUyxAHhg0p/o6ot0LVWugSzIW06pDoDE0GgXcgpWQ7VK2Gya1tsnh8fS28rm5DnEYjDY2YApNdUfW4egG+UiGuhcR2leAMkfJv7DPWjJOl4kxVI9JALMJJO+kkDp6rH++Ql8gAGSZ7yCjZT97EfjtMSDJv6Uknb4GlOxz/wZq38hbDNeHkUdetik9gSyVS3Mo7gGjCCiwVX2fVmydSCfbEinYnsAV6Bm1BBhmjTUe3Lno7JyZgxPPu4jLmfev5pz3Px2feH/c8cUzMwtbWlRVY8P1Wz//F931tfPxuBRMzfuDoix/n5yHrBxsRgq1iNvB/Azf33ocvvNMT4if0gu/HxYzX64v/PA/qPVhAt2VxqEec6enpvdTqwZcTS0Eu8cdy6bueYTEHHnLu98RB7zRsbVt+cifcp/cJXscZCC4gmBRnjzyEh0fCcKCyosf/FsBqnwB4nGNgZGBgAGJFsWeh8fw2Xxm4WRhA4PoavZsI+n8DCwNzI5DLwcAEEgUAHZgKSAB4nGNgZGBgbvjfwBDDwgACQJKRARVwAQBHEAJzeJxjYWBgYCECAwADmAApAAAAAAAAKACWAN4BAAEaAdwCPgLoAvwAAHicY2BkYGDgYmhnEGcAASYwjwtI/gfzGQAYmAG/AAAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicbY1LCsJAEAX7xU+SETEXmYVnyQGkaYdJ66QHHIOQ00cU4sZaPaoWjyr64ug/DhU22GKHPWo0aOFwoE4lm5chyN2XnPTavrfFmC0e+0kklOL7kVNyqz+fhPM85VXUMrBFtu6pbDflXwiPV9CRG5XL54JoAT0kKScAAAA=') format('woff')
    }


    .iconfont {
      font-family: "iconfont", serif !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }

    .icon-icon-check-solid:before {
      content: "\e672"
    }

    .icon-click:before {
      content: "\e83e"
    }

    .icon-qrcode:before {
      content: "\e607"
    }

    #ui-logo {
      width: 55px;
      height: 55px;
      background: url("../img/钱包.png");
      background-size: 100% 100%;
      margin: 5px;
      border-radius: 30px
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 5px
    }

    ::-webkit-scrollbar-track {
      background-color: #eaeaea;
      border-left: 1px solid #ccc
    }

    ::-webkit-scrollbar-thumb {
      background-color: #ccc
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: #aaa
    }
  </style>
</head>

<body id="color">
  <div id="ui-head" class="ui-panel ui-flex-pack-center ui-flex-align-center">
    <div id="ui-logo">
    </div>
    <div>
      <h1>
        扫码支付
      </h1>
      <h2>
        <script>
          document.write(window.setting.Name);
        </script>
      </h2>
    </div>
  </div>
  <br>
  <div class="code-item">
    <div class="ui-box ui-panel ui-flex-align-center">
      <div id="ui-content" class="ui-panel ui-flex-ver ui-flex-pack-center">
        <div class="ui-tips">
          <script>
            if (navigator.userAgent.match(/MicroMessenger\//i)) {
              // 微信
              document.body.style.backgroundColor = '#54bc6e'
              document.write('请长按赞赏码支付');
            } else if (navigator.userAgent.match(/QQ\//i)) {
              // QQ
              document.write('请长按二维码支付');
            } else {
              // 其它
              document.write('请扫描二维码支付');
            }
          </script>
        </div>
        <br>
        <div class="ui-qrcode">
          <img id="qrcode" />
        </div>
        <div class="ui-PayLine">

        </div>
        <div id="ui-setps" class="ui-panel ui-flex-pack-center">
          <div>
            <div class="ui-circle">
              1
            </div>
            <i class="icon iconfont icon-click">
            </i>
            <div class="ui-step">
              长按二维码
            </div>
          </div>
          <div>
            <div class="ui-circle">
              2
            </div>
            <i class="icon iconfont icon-qrcode">
            </i>
            <div class="ui-step">
              选择扫描二维码
            </div>
          </div>
          <div>
            <div class="ui-circle">
              3
            </div>
            <i class="icon iconfont icon-icon-check-solid">
            </i>
            <div class="ui-step">
              输入金额支付
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../js/qrious.min.js"></script>
  <script>
    if (navigator.userAgent.match(/MicroMessenger\//i)) {
      // 微信
      document.getElementById('qrcode').src = setting.wxpay;
    } else {
      let qr_url;
      if (navigator.userAgent.match(/QQ\//i)) {
        // QQ
        qr_url = setting.qqpay;
      } else {
        // 其它
        qr_url = window.location.href;
      }
      new QRious({
        element: document.getElementById('qrcode'),
        size: 800,
        background: 'white',
        foreground: 'black',
        level: 'H',
        value: qr_url
      });
    }
  </script>
</body>

</html>